<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>画廊-css3</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			h3{
				margin: 30px 0;
				text-align: center;
			}
			li{
				list-style-type: none;
			}
			.box{
				width: 800px;
				height: 512px;
				margin: 0 auto;
			}
			ul li{
				float: left;
			}
			ul li img{
				border: 5px solid #eee;
				margin: 5px;
				width: 140px;
				transition: 0.5s;
			}
			ul li img:hover{
				transform: scale(1.2);
			}
		</style>
	</head>
	<body>
		<h3>Hoverbox Image Gallery</h3>
		<div class="box">
			<ul>
				<li><img src="img/photo01.jpg" alt="" /></li>
				<li><img src="img/photo02.jpg" alt="" /></li>
				<li><img src="img/photo03.jpg" alt="" /></li>
				<li><img src="img/photo04.jpg" alt="" /></li>
				<li><img src="img/photo05.jpg" alt="" /></li>
				<li><img src="img/photo06.jpg" alt="" /></li>
				<li><img src="img/photo07.jpg" alt="" /></li>
				<li><img src="img/photo08.jpg" alt="" /></li>
				<li><img src="img/photo09.jpg" alt="" /></li>
				<li><img src="img/photo10.jpg" alt="" /></li>
				<li><img src="img/photo11.jpg" alt="" /></li>
				<li><img src="img/photo12.jpg" alt="" /></li>
				<li><img src="img/photo13.jpg" alt="" /></li>
				<li><img src="img/photo14.jpg" alt="" /></li>
				<li><img src="img/photo15.jpg" alt="" /></li>
				<li><img src="img/photo16.jpg" alt="" /></li>
				<li><img src="img/photo17.jpg" alt="" /></li>
				<li><img src="img/photo18.jpg" alt="" /></li>
				<li><img src="img/photo19.jpg" alt="" /></li>
				<li><img src="img/photo20.jpg" alt="" /></li>
			</ul>
		</div>
	</body>
</html>
